import React from 'react'
import { Carousel, Flex } from 'antd-mobile'
import axios from 'axios'
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
import './index.scss'
import {getCity} from '../../utils/getCity'

export default class Index extends React.Component {
  state = {
    swiperList: ['1', '2', '3'],
    imgHeight: 212,
    swiperListFlag: false,
    groupList: [],
    newsList: [],
    localCity: '西安'
  }

  navList = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/houselist'
  }, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/houselist'
  }, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/home/map'
  }, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/houselist'
  }]

  componentDidMount() {
    this.getSwiperList()
    this.getGroupList()
    this.getNewsList()
    this.getLocalCity()
  }

  getLocalCity = async () => {
    const localCity = await getCity()

    this.setState({
      localCity: localCity.label
    })
  }


  getSwiperList = async () => {
    const { data } = await axios.get('http://127.0.0.1:8080/home/swiper')

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      swiperList: data.body,
      swiperListFlag: true
    })
  }

  getGroupList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      groupList: data.body
    })
  }

  getNewsList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      newsList: data.body
    })
  }

  renderSwiperList = () => {
    if (!this.state.swiperListFlag) {
      return (<div style={{ height: 212, background: '#ccc', width: '100%' }}></div>)
    }

    return (<Carousel
      autoplay
      infinite
      autoplayInterval={2000}
    >
      {this.state.swiperList.map(val => (
        <a
          key={val}
          href="http://www.itcast.com"
          style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
        >
          <img
            src={`http://127.0.0.1:8080${val.imgSrc}`}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
            onLoad={() => {
              window.dispatchEvent(new Event('resize'))
              this.setState({ imgHeight: 'auto' })
            }}
          />
        </a>
      ))}
    </Carousel>)
  }

  renderNavList = () => {
    return (
      <div className="nav">
        {this.navList.map(item => {
          return (<div className="nav-item" key={item.id} onClick={() => this.props.history.push(item.path)}>
            <img src={item.img} alt="" />
            <div className="nav-text">{item.title}</div>
          </div>)
        })}
      </div>
    )
  }

  renderGroupList = () => {
    return (
      <div className="group">
        <div className="group-title">
          <span>租房小组</span>
          <span>更多</span>
        </div>
        <div className="group-list">
          {this.state.groupList.map(item => (<div className="group-item" key={item.id}>
            <div className="group-item-left">
              <div className="item-title">{item.title}</div>
              <div className="item-desc">{item.desc}</div>
            </div>
            <img src={`http://127.0.0.1:8080${item.imgSrc}`} alt="" />
          </div>)
          )}
        </div>
      </div>
    )
  }

  renderNewsList = () => {
    return (
      <div className="news">
        <div className="news-title">
          新闻资讯
        </div>
        {this.state.newsList.map(item => {
          return (<div className="news-item" key={item.id}>
            <img src={`http://127.0.0.1:8080${item.imgSrc}`} alt="" />
            <div className="from-date-title">
              <div className="from-date-title-t">
                {item.title}
              </div>
              <div className="from-date-title-fd">
                <span>{item.from}</span>
                <span>{item.date}</span>
              </div>
            </div>
          </div>)
        })}
      </div>
    )
  }

  renderHeader = () => {
    return (
      <Flex className='search-box'>
        <Flex className="search">
          <div className="location" onClick={() => this.props.history.push('/citylist')}>
            <span className="name">{this.state.localCity}</span>
            <i className="iconfont icon-arrow" />
          </div>
          <div className="form" onClick={() => this.props.history.push('/search')}>
            <i className="iconfont icon-seach" />
            <span className="text">请输入小区或地址</span>
          </div>
        </Flex>
        <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
      </Flex>
    )
  }

  render() {
    return (
      <div id="index">
        {this.renderSwiperList()}

        {this.renderNavList()}

        {this.renderGroupList()}

        {this.renderNewsList()}

        {this.renderHeader()}
      </div>
    )
  }
}
